<!--
  功能：登陆页面
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年09月22日 20:01:14
-->
<template>
  <div class="login">
    <div class="login-bg"></div>
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14}" class="login-form">
      <a-form-item label="登陆账号" v-bind="validateInfos.account">
        <a-input v-model:value="modelRef.account" v-focus @keyup.enter="onSubmit" />
      </a-form-item>

      <a-form-item label="登陆密码" v-bind="validateInfos.password">
        <a-input-password v-model:value="modelRef.password" @keyup.enter="onSubmit" />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 6, span: 14 }">
        <a-button type="primary" @click.prevent="onSubmit" class="login-form-btn">登陆</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { setAuthorization } from '@/utils/auth'
import { login } from '@/api/loginApi'
import { defineComponent, reactive, toRefs, toRaw } from 'vue'
import { Form, message } from 'ant-design-vue'
const useForm = Form.useForm
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default defineComponent({
  name: '',
  props: {},
  emits: [],
  setup(props, context) {
    const store = useStore()
    const router = useRouter()
    const data = reactive({}) //里面写所有的响应式数据，像vue2中的data一样
    const modelRef = reactive({
      account: '',
      password: ''
    })
    const rulesRef = reactive({
      account: [
        {
          required: true,
          message: '登陆账号必填项'
        }
      ],
      password: [
        {
          required: true,
          message: '登陆密码必填项'
        }
      ]
    })

    const { validate, validateInfos } = useForm(modelRef, rulesRef)

    const onSubmit = () => {
      validate()
        .then(() => {
          loginSystem()
        })
        .catch(err => {
          console.log('error', err)
        })
    }
    // 登陆系统
    const loginSystem = () => {
      let params = toRaw(modelRef)
      login(params).then(resd => {
        setAuthorization(resd)
        message.success('登陆成功')
        router.replace('/dashboard/home')
      })
    }
    return {
      ...toRefs(data),
      modelRef,
      onSubmit,
      validateInfos
    }
  },
  components: {}
})
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-bg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    opacity: 0.7;
    background-image: url('/src/assets/images/login-bg.jpeg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .login-form {
    width: 500px;
    background-color: #ffffff;
    border: #eeeeee 0px solid;
    border-radius: 20px;
    padding: 20px;
    z-index: 2;
    box-shadow: #eeeeee 0px 0px 4px 10px;
  }

  .login-form-btn {
    width: 100%;
  }
}
</style>